import React, { Component } from 'react'
import { TabBar } from 'antd-mobile';
import { connect } from 'react-redux';

function mapStateToProps(state) {
    return {
    ...state
    };
}


class Footer extends Component {
    state = {
        hidden: false,
        selectedTab: sessionStorage.getItem('selectedTab')?sessionStorage.getItem('selectedTab'):'home'
    }

    componentWillMount(){
        console.log('footer componentWillMount this.state',this.state)
    }
   render() {
        return (
            <div id="footer">
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="white"
                    hidden={this.state.hidden}
                >
                    <TabBar.Item
                        title="首页"
                        key="home"
                        icon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url(/image/home.svg) center center /  21px 21px no-repeat'
                        }}
                        />
                        }
                        selectedIcon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url(/image/home-selected.svg) center center /  21px 21px no-repeat'
                        }}
                        />
                        }
                        selected={this.state.selectedTab === 'home'}
                       
                        onPress={() => {
                            this.setState({
                                selectedTab: 'home',
                            });

                            sessionStorage.setItem('selectedTab','home');

                            this.props.history.push({ pathname: '/' })
                        }}

                    >

                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(/image/cate.svg) center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(/image/cate-selected.svg) center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        title="产品分类"
                        key="cate"
                        badge={'new'}
                        selected={this.state.selectedTab === 'cate'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'cate',
                            });
                            sessionStorage.setItem('selectedTab','cate');

                            this.props.history.push({ pathname: '/cate' })
                        }}

                    >

                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(/image/cart.svg) center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(/image/cart-selected.svg) center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        title="购物车"
                        key="cart"
                        badge={this.props.totalNum}
                        selected={this.state.selectedTab === 'cart'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'cart',
                            });
                            sessionStorage.setItem('selectedTab','cart');

                            this.props.history.push({ pathname: '/cart' })
                        }}
                    >

                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(/image/my.svg) center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(/image/my-selected.svg) center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        title="我的"
                        key="my"
                        dot
                        selected={this.state.selectedTab === 'my'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'my',
                            });
                            sessionStorage.setItem('selectedTab','my');

                            this.props.history.push({ pathname: '/my' })
                        }}
                    >

                    </TabBar.Item>

                </TabBar>
            </div>
        )
    }
}

export default connect(
    mapStateToProps,
)(Footer);